<template>
  <div class="shop">
    <div class="top">商品列表</div>
    <ul class="ul">
      <li v-for="(item,index) in list" :class="{active:tabindex==index}" :key="index" @click="change(index,item._id)">{{item.title}}</li>
    </ul>
    <ul v-if="filt.length!=0">
      <li v-for="(item,index) in filt" :key="index" class="li">
        <van-card :thumb="item.pic">
          <template #tags>
            <h3>{{item.title}}</h3>
            <div class="flex">
              <p class="purple">￥{{item.price}}</p>
              <span>{{item.old_price}}人付款</span>
              <button @click="add(item)">+</button>
            </div>
          </template>
        </van-card>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      tabindex: 0,
      cart: [],
      filt: []
    };
  },
  methods: {
    change(index, id) {
      this.tabindex = index;
      this.filt = this.cart.filter(item => item.cid == id);
    },
    add(item){
      this.$router.push('/order')
      this.$store.commit('addCart',item)
    }
  },
  created() {
    this.$axios.get("cate.json").then(res => {
      console.log(res);
      this.list = res.data.result;
    });
    this.$axios.get("list.json").then(res => {
      console.log(res);
      this.cart = res.data.result;
      this.change(0, "59f1e1ada1da8b15d42234e9");
    });
  }
};
</script>
<style lang="scss" scoped>
.top {
  width: 100vw;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.ul {
  display: flex;
  align-items: center;
  // justify-content: space-around;
  width: 100vw;
  height: 50px;
  background: purple;
  color: #fff;
  li {
    flex: 1;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
}
.li {
  margin-top: 5px;
  padding: 0 5px;
}
.purple {
  margin-top: 20px;
  font-size: 20px;
  color: purple;
}
.active {
  background-color: #c00;
}
span {
  font-size: 12px;
  color: #858585;
}
.flex{
  position: relative;
}
button{
  position: absolute;
  bottom: 2px;
  right: 10px;
  margin-left: 150px;
  border: none;
  width: 30px;
  height: 15px;
  background-color: #9830cb;
  border-radius: 8px;
  color: #fff;
}
</style>
